<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <style>
    * {
      scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.2);
    }

    body {
      color: white;
      font-family: Arial, sans-serif;
      font-style: normal;
      font-variant: normal;
      font-weight: 500;
      background-color: rgb(51, 51, 51);
    }

    #eTextTranslated,
    #eOrigText {
      padding: 14px;
      font-size: 16px;
      max-width: 500px;
      max-height: 200px;
      overflow: auto;
      white-space: pre-wrap;
    }

    #eOrigText {
      outline: none;
    }

    ul {
      margin: 0;
      padding: 3px;
      list-style-type: none;
      overflow: hidden;
      user-select: none;
    }

    li {
      margin: 5px;
      float: left;
      cursor: pointer;
      text-align: center;
      vertical-align: middle;
      padding: 4px 6px;
      border-radius: 5px;
      box-shadow: 0 0 3px -2px black;
      background-color: rgba(0, 0, 0, 0.3);
      border: none;
      transition: 0.2s;
    }

    li:hover {
      transform: translateY(-1px);
    }

    hr {
      width: 95%;
      border: 1px rgba(255, 255, 255, 0.75) solid;
    }

    .selected {
      background-color: rgba(0, 0, 0, 0.8);
      border: none;
    }

    #listenTranslated, #listenOriginal {
      padding-top: 6px;
      padding-bottom: 2px;
    }
  </style>
</head>

<body>
  <div>
    <ul style="position: absolute; top: 0px; right: 28px;"><li style="padding-top: 6px; padding-bottom: 2px; fill: white" title="Listen" data-i18n-title="btnListen" id="listenOriginal">
      <svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 93.038 93.038"
        style="enable-background:new 0 0 93.038 93.038;" xml:space="preserve">
      <g>
        <path d="M46.547,75.521c0,1.639-0.947,3.128-2.429,3.823c-0.573,0.271-1.187,0.402-1.797,0.402c-0.966,0-1.923-0.332-2.696-0.973
        l-23.098-19.14H4.225C1.892,59.635,0,57.742,0,55.409V38.576c0-2.334,1.892-4.226,4.225-4.226h12.303l23.098-19.14
        c1.262-1.046,3.012-1.269,4.493-0.569c1.481,0.695,2.429,2.185,2.429,3.823L46.547,75.521L46.547,75.521z M62.784,68.919
        c-0.103,0.007-0.202,0.011-0.304,0.011c-1.116,0-2.192-0.441-2.987-1.237l-0.565-0.567c-1.482-1.479-1.656-3.822-0.408-5.504
        c3.164-4.266,4.834-9.323,4.834-14.628c0-5.706-1.896-11.058-5.484-15.478c-1.366-1.68-1.24-4.12,0.291-5.65l0.564-0.565
        c0.844-0.844,1.975-1.304,3.199-1.231c1.192,0.06,2.305,0.621,3.061,1.545c4.977,6.09,7.606,13.484,7.606,21.38
        c0,7.354-2.325,14.354-6.725,20.24C65.131,68.216,64.007,68.832,62.784,68.919z M80.252,81.976
        c-0.764,0.903-1.869,1.445-3.052,1.495c-0.058,0.002-0.117,0.004-0.177,0.004c-1.119,0-2.193-0.442-2.988-1.237l-0.555-0.555
        c-1.551-1.55-1.656-4.029-0.246-5.707c6.814-8.104,10.568-18.396,10.568-28.982c0-11.011-4.019-21.611-11.314-29.847
        c-1.479-1.672-1.404-4.203,0.17-5.783l0.554-0.555c0.822-0.826,1.89-1.281,3.115-1.242c1.163,0.033,2.263,0.547,3.036,1.417
        c8.818,9.928,13.675,22.718,13.675,36.01C93.04,59.783,88.499,72.207,80.252,81.976z"/>
      </g>
      </svg>
    </li></ul>
    <div id="eOrigTextDiv">
      <div id="eOrigText" contenteditable="true" spellcheck="false" dir="auto"></div>
      <hr />
    </div>
    <div id="eTextTranslated" dir="auto"></div>
    <div style="
          display: flex;
          justify-content: space-between;
          flex-direction: row;
        ">
      <ul id="setTargetLanguage">
        <li value="en" title="English">en</li>
        <li value="es" title="Spanish">es</li>
        <li value="de" title="German">de</li>
      </ul>
      <ul>
        <li title="Google" id="sGoogle">g</li>
        <li title="Bing" id="sBing">b</li>
        <li title="Yandex" id="sYandex">y</li>
        <li title="DeepL" id="sDeepL" hidden>d</li>
        <li title="libre" id="sLibre" hidden>l</li>
      </ul>
      <ul>
        <li title="Copy" data-i18n-title="btncopy" id="copy">
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13 7H7V5H13V7Z" fill="currentColor" />
            <path d="M13 11H7V9H13V11Z" fill="currentColor" />
            <path d="M7 15H13V13H7V15Z" fill="currentColor" />
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M3 19V1H17V5H21V23H7V19H3ZM15 17V3H5V17H15ZM17 7V19H9V21H19V7H17Z" fill="currentColor" />
          </svg>
        </li>
        <li style="padding-top: 6px; padding-bottom: 2px; fill: white" title="Listen" data-i18n-title="btnListen"
          id="listenTranslated">
          <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px" y="0px" width="10px" height="10px" viewBox="0 0 93.038 93.038"
            style="enable-background: new 0 0 93.038 93.038" xml:space="preserve">
            <g>
              <path d="M46.547,75.521c0,1.639-0.947,3.128-2.429,3.823c-0.573,0.271-1.187,0.402-1.797,0.402c-0.966,0-1.923-0.332-2.696-0.973
                                l-23.098-19.14H4.225C1.892,59.635,0,57.742,0,55.409V38.576c0-2.334,1.892-4.226,4.225-4.226h12.303l23.098-19.14
                                c1.262-1.046,3.012-1.269,4.493-0.569c1.481,0.695,2.429,2.185,2.429,3.823L46.547,75.521L46.547,75.521z M62.784,68.919
                                c-0.103,0.007-0.202,0.011-0.304,0.011c-1.116,0-2.192-0.441-2.987-1.237l-0.565-0.567c-1.482-1.479-1.656-3.822-0.408-5.504
                                c3.164-4.266,4.834-9.323,4.834-14.628c0-5.706-1.896-11.058-5.484-15.478c-1.366-1.68-1.24-4.12,0.291-5.65l0.564-0.565
                                c0.844-0.844,1.975-1.304,3.199-1.231c1.192,0.06,2.305,0.621,3.061,1.545c4.977,6.09,7.606,13.484,7.606,21.38
                                c0,7.354-2.325,14.354-6.725,20.24C65.131,68.216,64.007,68.832,62.784,68.919z M80.252,81.976
                                c-0.764,0.903-1.869,1.445-3.052,1.495c-0.058,0.002-0.117,0.004-0.177,0.004c-1.119,0-2.193-0.442-2.988-1.237l-0.555-0.555
                                c-1.551-1.55-1.656-4.029-0.246-5.707c6.814-8.104,10.568-18.396,10.568-28.982c0-11.011-4.019-21.611-11.314-29.847
                                c-1.479-1.672-1.404-4.203,0.17-5.783l0.554-0.555c0.822-0.826,1.89-1.281,3.115-1.242c1.163,0.033,2.263,0.547,3.036,1.417
                                c8.818,9.928,13.675,22.718,13.675,36.01C93.04,59.783,88.499,72.207,80.252,81.976z" />
            </g>
          </svg>
        </li>
      </ul>
    </div>
  </div>

  <script src="/lib/polyfill.js"></script>
  <script src="/lib/checkedLastError.js"></script>
  <script src="/lib/stuff.js"></script>
  <script src="/lib/languages.js"></script>
  <script src="/lib/config.js"></script>
  <script src="/lib/i18n.js"></script>
  <script src="popup-translate-text.js"></script>
</body>

</html>